@use '@styles/abstracts' as *;

/**
 * 自定义样式
 *
 * 此文件用于添加项目特定的自定义样式，适用于以下场景：
 * 1. 原子化CSS（UnoCSS）无法满足的复杂样式
 * 2. 需要覆盖第三方组件的样式
 * 3. 特定的交互效果和动画
 *
 * 使用指南：
 * - 纯SCSS文件需要显式导入变量，Vue文件中的样式块自动全局注入
 * - 推荐按功能或组件分类组织样式
 * - 避免与 UnoCSS 功能重复的样式
 */

/* ============== 示例：自定义组件样式 ============== */

/*
// 示例：自定义渐变按钮
.custom-gradient-btn {
  background-image: $color-gradient-primary;
  color: $color-text-inverse;
  transition: opacity $duration-fast $ease-default;

  &:active {
    opacity: 0.8;
  }
}

// 示例：多行文本截断
.custom-text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
*/

/* ============== 示例：组件样式覆盖 ============== */

/*
// 示例：覆盖 uni-app 弹出层样式
.uni-popup {
  .uni-popup__mask {
    background-color: $color-bg-mask;
    opacity: 1;
  }

  .uni-popup__wrapper {
    border-radius: $radius-large $radius-large 0 0;
    overflow: hidden;
  }
}
*/
